<template>
  <view class="index-container">
    <!-- 轮播图 -->
    <swiper indicator-dots autoplay circular class="banners">
      <swiper-item v-for="(item, index) in bannerList" :key='index'>
        <image :src="item.src" mode="scaleToFill" />
      </swiper-item>
    </swiper>

    <!-- 导航列表 -->
    <view class="nav-list">
      <view class="nav-item" v-for="item in navList" :key="item.name">
        <image :src="item.src" mode="scaleToFill" />
        <text>{{ item.name }}</text>
      </view>
    </view>


    <view class="content-container">
      <!-- 热门课堂 -->
      <card title="热门课程" more="全部课程">
        <card-item v-for="(item,index) in courseList" :key="item.id"  :detail="item" type="course"></card-item>
      </card>
      <!-- 老师 -->
      <card title="名师大咖" more="全部老师">
        <card-item v-for="(item,index) in teacherList" :key="item.id"  :detail="item" type="teacher"></card-item>
      </card>
    </view>
  </view>
</template>
<script lang='ts' setup>
import { hotCateList, bannerCateList } from '@/common/mock/home'
import { ref, reactive, onMounted } from 'vue'
import HoemService from '@/api/home'

/* 定义响应式数据 */
type BannerType = {
  src: string
}

type NavItemType = {
  src: string,
  name: string
}
let bannerList = ref<BannerType[]>(bannerCateList)
let navList = ref<NavItemType[]>(hotCateList)
// 课堂的数据
let courseList = ref()
// 老师的数据
let teacherList = ref()

/* 组件挂在完毕 */
onMounted(() => {
  getIndexData()
})


/* 获取主页数据的功能函数 */
async function getIndexData() {
  try {
    let Result = await HoemService.getHomeData()
    console.log(Result)
    if (Result.code === 200) {
      courseList.value = Result.data.courseList
      teacherList.value = Result.data.teacherList
    }
  } catch (error) {
    console.log(error)
  }
}









</script>
<style lang='less' scoped>
.index-container {
  .banners {
    width: 100%;
    height: 300rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .nav-list {
    display: flex;

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;

      image {
        width: 72rpx;
        height: 72rpx;
        margin: 20rpx 0;
      }

      text {
        font-size: 24rpx;
      }
    }
  }
}
</style>